import React from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  ScrollView,
  StyleSheet,
  Dimensions,
  SafeAreaView,
  
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const { width } = Dimensions.get('window');
// import Image from '../images/barbar/王者荣耀.png'
const games = [
  { name: '王者荣耀', icon: require('../src/images/barbar/王者荣耀.png') },
  { name: '航海王', icon: require('../src/images/barbar/航海王.png') },
  { name: '神武4', icon: require('../src/images/barbar/神武.png') },
  { name: '火影忍者', icon: require('../src/images/barbar/火影.png') },
  { name: '口袋妖怪', icon: require('../src/images/barbar/口袋.png') },
  { name: '穿越火线', icon: require('../src/images/barbar/穿越.png') },
  { name: '闪烁之光', icon: require('../src/images/barbar/仙境传说.png') },
  { name: '仙侠传说', icon: require('../src/images/barbar/闪烁.png') },
  { name: '率土之滨', icon: require('../src/images/barbar/率土.png') },
  { name: '少年三国志', icon: require('../src/images/barbar/少年三国志.png') },
  { name: '三国志', icon: require('../src/images/barbar/三国志.png') },
  { name: '阿拉德之怒', icon: require('../src/images/barbar/阿拉德之怒.png') },
];

const letters = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];

export default function BuyScreen() {
  return (
    <SafeAreaView style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.headerText}>我要买</Text>
      </View>
      {/* Search & Filter */}
      <View style={styles.searchArea}>
        <View style={styles.searchInputWrapper}>
          <Icon name="search" size={16} color="#ccc" style={{ marginLeft: 10 }} />
          <TextInput
            style={styles.searchInput}
            placeholder="请输入游戏名称"
            placeholderTextColor="#ccc"
          />
        </View>
        <View style={styles.filterRow}>
          <TouchableOpacity style={styles.filterBtn} disabled>
            <Text style={styles.filterBtnText}>商品分类</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.typeBtn}>
            <Text style={styles.typeBtnText}>游戏类型</Text>
          </TouchableOpacity>
        </View>
      </View>

      <View style={{height: 6, backgroundColor: '#f5f5f5'}}>
        
      </View>
      <View style={styles.contentRow}>
        {/* Side Bar */}
        <View style={styles.sidebar}>
          <Text style={[styles.sidebarItem, styles.hot]}>热门</Text>
          {letters.map(l => (
            <Text key={l} style={styles.sidebarItem}>{l}</Text>
          ))}
        </View>

        {/* Game List */}
        <ScrollView
          style={styles.gameList}
          contentContainerStyle={{ paddingBottom: 0 }}
        >
          {games.map((game, idx) => (
            <TouchableOpacity key={idx} style={styles.gameItem}>
              <Image source={game.icon} style={styles.gameIcon} />
              <Text style={styles.gameName}>{game.name}</Text>
              <Text style={styles.arrow}>
                {'>'}
                  {/* <Image source={require('../game/122.png')} style={{width: 24, height: 24}}/> */}
              </Text>
            </TouchableOpacity>
          ))}
          <Text style={styles.bottomTip}>讨厌，都被你看光啦！</Text>
        </ScrollView>
      </View>

      {/* Bottom Tab Bar */}
      <View style={styles.tabBar}>
        {/* <TabItem label="首页" icon={require('./assets/home.png')} />
        <TabItem label="我要买" icon={require('./assets/buy.png')} active />
        <TabItem label="我要卖" icon={require('./assets/sell.png')} />
        <TabItem label="购物车" icon={require('./assets/cart.png')} />
        <TabItem label="我的" icon={require('./assets/me.png')} /> */}
      </View>
    </SafeAreaView>
  );
}

function TabItem({ label, icon, active }) {
  return (
    <TouchableOpacity style={styles.tabItem}>
      <Image source={icon} style={[styles.tabIcon, active && styles.tabIconActive]} />
      <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  header: { height: 52, backgroundColor: '#CF1322', justifyContent: 'center', alignItems: 'center' },
  headerText: { color: '#fff', fontSize: 19, fontWeight: 'bold' },
  searchArea: {
    backgroundColor: '#fff',
    paddingHorizontal: 12,
    paddingTop: 12,
    paddingBottom: 8,
  },
  searchInputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    borderRadius: 20,
    height: 36,
    marginTop: 8,
    marginBottom: 15,
    paddingRight: 10,
  },
  searchInput: {
    flex: 1,
    height: 36,
    backgroundColor: 'transparent',
    borderRadius: 20,
    paddingHorizontal: 8,
    fontSize: 14,
    color: '#333',
  },
  filterRow: {
    height: 55,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  filterBtn: {
    flex: 1,
    height: 42,
    backgroundColor: '#f5f5f5',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
  filterBtnText: {
    color: '#bbb',
    fontSize: 14,
  },
  typeBtn: {
    flex: 1,
    height: 42,
    backgroundColor: '#d0021b',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
  },
  typeBtnText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
  contentRow: { flex: 1, flexDirection: 'row' },
  sidebar: { width: 80, backgroundColor: '#e9e9e9', alignItems: 'center',},
  sidebarItem: { color: '#2e2e2e', fontSize: 14, marginBottom:10 ,fontWeight:'500'},
  sidebarItem: { color: '#2e2e2e', fontSize: 14, marginBottom:10 ,fontWeight:'500'},
  hot: { color: '#d0021b', fontWeight: 'bold', marginBottom: 8, backgroundColor: '#fff',  width: 80,textAlign:'center',height: 35,lineHeight: 35},
  gameList: { flex: 1, backgroundColor: '#fff'},
  gameItem: { flexDirection: 'row', alignItems: 'center', padding: 12, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' },
  gameIcon: { width: 50, height: 50, borderRadius: 8, marginRight: 12 },
  gameName: { flex: 1, fontSize: 16, color: '#333' },
  arrow: { color: '#ccc', fontSize: 18 },
  bottomTip: { textAlign: 'center', color: '#bbb', marginVertical: 20, fontSize: 14 },
  tabBar: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 0,
    flexDirection: 'row',
    borderTopWidth: 1,
    borderTopColor: '#eee',
    backgroundColor: '#fff',
    zIndex: 10,
  },
  tabItem: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  tabIcon: { width: 24, height: 24, marginBottom: 2, tintColor: '#888' },
  tabIconActive: { tintColor: '#d0021b' },
  tabLabel: { fontSize: 12, color: '#888' },
  tabLabelActive: { color: '#d0021b', fontWeight: 'bold' },
});